<template>
    <div class="teacher-list">
        <ZkList ref="table" rowKey="roleId" :searchs="searchs" :columns="columns" :data="loadData">
            <template #operBtns>
                <div>
                    <a-button type="primary" icon="plus" @click="handleEdit()">新增</a-button>
                </div>
            </template>
            <template #status="record">
                <a-switch checked-children="启用" un-checked-children="停用" :checked="record.status==BaseSysStatusEnum.ENABLE" @click="switchStatus(record)" />
            </template>
            <template #action="record">
                <span>
                    <zk-btn @click="handleSelectFunction(record)" icon="edit">功能</zk-btn>
                    <a-divider type="vertical" />
                    <zk-btn @click="handleUser(record)" icon="edit">用户</zk-btn>
                    <a-divider type="vertical" /> 
                    <zk-btn @click="handleEdit(record)" icon="edit">修改</zk-btn>
                    <a-divider type="vertical" />
                    <zk-btn @click="handleDel(record)" icon="delete">删除</zk-btn>
                </span>
            </template>
        </ZkList>
        <RoleEdit ref="edit"></RoleEdit>
        <SelectFunction ref="selectFunction"></SelectFunction>
        <AuthUser ref="authUser"></AuthUser>
    </div>
</template>
<script>
    import { ZkList, InputTypeEnum } from '@/appBase';
    import { getSysStatusOpts } from '../common/service/base';
    import { BaseSysStatusEnum } from '../common/enum/enum';
    import { changeRoleStatus, delRole, queryRoleList } from '@/api/role';
    import RoleEdit from './RoleEdit.vue';
    import SelectFunction from './SelectFunction.vue';
    import AuthUser from './AuthUser.vue';
    export default {
        name: 'PersonnelList',
        components: {
            ZkList,
            RoleEdit,
            SelectFunction,
            AuthUser
        },
        data() {
            return {
                title: "角色管理",
                BaseSysStatusEnum,
                // 查询
                searchs: [
                    { title: "角色名", dataIndex: 'roleName' },
                    { title: "权限字符", dataIndex: 'roleKey' },
                    { title: "状态", dataIndex: 'status', type: InputTypeEnum.SELECT, options: () => getSysStatusOpts(1) },
                    { title: "开始时间", dataIndex: 'beginTime', type: InputTypeEnum.DATE },
                    { title: "结束时间", dataIndex: 'endTime', type: InputTypeEnum.DATE },
                ],
                // 表头
                columns: [
                    { title: "角色编号", dataIndex: "roleId", width: '140px', maxLength: 10 },
                    { title: "角色名", dataIndex: "roleName", width: '150px', maxLength: 10 },
                    { title: "权限标识", dataIndex: "roleKey", width: '100px' },
                    { title: "排序", dataIndex: "roleSort", width: '100px' },
                    { title: "状态", scopedSlots: { customRender: "status" }, width: '150px' },
                    { title: "创建时间", dataIndex: "createTime", width: '150px',format:true },
                    { title: "操作", scopedSlots: { customRender: "action" }, width: '180px', fixed: 'right' },
                ],
                // 加载数据方法 必须为 Promise 对象
                loadData: (queryParams, parameter) => {
                    this.curParams = {
                        ...queryParams
                    };
                    return queryRoleList(queryParams, parameter);
                }
            }
        },
        methods: {
            handleSelectFunction(item) {
                this.$refs.selectFunction.show({
                    id: item.roleId,
                    onOk: () => {
                       
                    }
                });
            },

            handleEdit(item) {
                if (item) {
                    this.$refs.edit.show({
                        id: item.roleId,
                        onOk: () => {
                            this.$refs.table.refresh(true);
                        }
                    });
                } else {
                    this.$refs.edit.show({
                        onOk: () => {
                            this.$refs.table.refresh(true);
                        }
                    });
                }
            },

            handleDel(item) {
                this.$confirm({
                    title: '提示',
                    content: `确定要删除角色："${item.roleName}"？`,
                    onOk: async () => {
                        await delRole(item.roleId);
                        this.$refs.table.refresh(true);
                    }
                });
            },
            async switchStatus(item) {
                if (item.status==BaseSysStatusEnum.ENABLE) {
                    await changeRoleStatus(item.roleId,BaseSysStatusEnum.DISABLED);
                }else{
                    await changeRoleStatus(item.roleId,BaseSysStatusEnum.ENABLE);
                }
                this.$refs.table.refresh(false);
            },
            handleUser(item){
                this.$refs.authUser.show({ id:item.roleId });
            }
        }
    }
</script>